<template>
	<div class="person">
		<h1>情况三：监视【reactive】定义的【响应式数据】</h1>
		<h2>姓名：{{ person.name }}</h2>
		<h2>年龄：{{ person.age }}</h2>
		<button @click="changeName">修改名字</button>
		<button @click="changeAge">修改年龄</button>
		<button @click="changePreson">换人</button>
	</div>
</template>
<script lang="ts" setup>
import { reactive, watch } from 'vue';
//数据
let person = reactive({
	name: '张三',
	age: 18,
})
function changeName() {
	person.name += '^'
}
function changeAge() {
	person.age += 1
}

function changePreson() {
	Object.assign(person, { name: "李四", age: 19 });
}

watch(person, (newVal, oldVal) => {
	console.log('person', newVal, oldVal);
})
</script>
<style>
.person {
	padding: 10px;
}
</style>
